<template>
	<div class="regist">
		<div class="boxShadow">
			<div class="registForm">
				<el-form
					ref="form"
					:model="form"
					:rules="rules"
					status-icon
				>
					<el-form-item prop="userId">
						<el-input
							v-model.trim="form.userId"
							class="userinput"
							type="text"
							placeholder="用户名"
							@keyup.enter.native="onSubmit('form')"
						/>
					</el-form-item>
					<el-form-item prop="student_id">
						<el-input
							v-model.trim="form.student_id"
							class="userinput"
							type="text"
							placeholder="学号"
							@keyup.enter.native="onSubmit('form')"
						/>
					</el-form-item>
					<el-form-item
						v-if="!isregist"
						prop="userPhone"
					>
						<span class="phoneType">+ 86</span>
						<el-input
							v-model.trim="form.userPhone"
							class="userPhone userinput"
							type="text"
							placeholder="11位手机号"
							@keyup.enter.native="onSubmit('form')"
						/>
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							v-model.trim="form.password"
							class="userinput"
							type="password"
							placeholder="6 - 16位密码，区分大小写"
							@keyup.enter.native="onSubmit('form')"
						/>
					</el-form-item>
					<el-form-item prop="confirmPassword">
						<el-input
							v-model.trim="form.confirmPassword"
							class="userinput"
							type="password"
							placeholder="确认密码"
							@keyup.enter.native="onSubmit('form')"
						/>
					</el-form-item>
					<el-form-item
						v-if="isregist"
						prop="userPhone"
					>
						<span class="phoneType">+ 86</span>
						<el-input
							v-model.trim="form.userPhone"
							class="userPhone userinput"
							type="text"
							placeholder="11位手机号"
							@keyup.enter.native="onSubmit('form')"
						/>
					</el-form-item>
					<el-form-item>
						<a
							v-if="isregist"
							class="registbtn"
							href="javascript:"
							@click="onSubmit('form')"
							>注册</a
						>
						<a
							v-else
							class="registbtn"
							href="javascript:"
							@click="onSubmit('form')"
							>重置密码</a
						>
					</el-form-item>
					<el-form-item>
						<span
							class="forgot-password"
							@click="getLoginTag(true)"
							>使用已有账号登录</span
						>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import { getRegister, forget } from "@/api/user";
	export default {
		props: {
			isregist: {
				type: Boolean,
				default: true,
			},
		},
		components: {},
		data() {
			var judgeConfirmPassWord = (rule, value, callback) => {
				if (value !== this.form.password) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
			var judgePassWord = (rule, value, callback) => {
				let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
				if (reg.test(value) === false) {
					callback(new Error("密码太弱，请包含字母和数字!"));
				} else {
					callback();
				}
			};
			var judgePhone = (rule, value, callback) => {
				let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
				if (reg.test(value) === false) {
					callback(new Error("请输入正确手机号!"));
				} else {
					callback();
				}
			};
			return {
				form: {
					userId: "",
					password: "",
					confirmPassword: "",
					userPhone: "",
					student_id: "",
				},
				/**
				 *表单创建规则
				 */
				rules: {
					userId: [
						{ required: true, message: "请输入用户名", trigger: "blur" },
					],
					password: [
						{ required: true, message: "请输入密码", trigger: "blur" },
						{
							min: 6,
							max: 16,
							message: "长度在 6 到 16 个字符",
							trigger: "blur",
						},
						{ validator: judgePassWord, trigger: "blur" },
					],
					student_id: [
						{ required: true, message: "请输入学号", trigger: "blur" },
					],
					confirmPassword: [
						{ required: true, message: "请确认密码", trigger: "blur" },
						{
							min: 6,
							max: 16,
							message: "长度在 6 到 16 个字符",
							trigger: "blur",
						},
						{ validator: judgeConfirmPassWord, trigger: "blur" },
					],
					userPhone: [
						{ required: true, message: "请输入手机号", trigger: "blur" },
						{ validator: judgePhone, trigger: "blur" },
					],
				},
				second: 60,
				isDisabled: false,
			};
		},
		computed: {},
		watch: {},
		mounted() {},
		methods: {
			getLoginTag(val) {
				this.$emit("getLoginTag", val);
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.getNewAccount();
					} else {
						return false;
					}
				});
			},
			getNewAccount() {
				let obj = {
					name: this.form.userId,
					password: this.form.confirmPassword,
					phone: this.form.userPhone,
					student_id: this.form.student_id,
				};
				if (!this.isregist) {
					forget(obj)
						.then((res) => {
							this.$message(res.message);
							if (res.success) {
								this.$emit("changeTab", "login");
								this.$emit("triggerBrotherMethods", this.form.userId);
							}
						})
						.catch(() => {});
				} else {
					getRegister(obj)
						.then((res) => {
							console.log("getRegisterres", res);
							this.$message(res.message);
							if (res.message === "注册成功") {
								this.$emit("changeTab", "login");
								this.$emit("triggerBrotherMethods", this.form.userId);
							}
						})
						.catch(() => {});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.regist {
		position: relative;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.boxShadow {
			position: relative;
			display: flex;
			.registForm {
				height: auto;
				background-size: 100% 100%;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.title {
					font-size: 20em;
					color: #ffffff;
					margin: 0.52vw 0 1.041vw;
				}
				.forgot-password {
					width: 100%;
					text-align: right;
					color: #1890ff;
					cursor: pointer;
					font-size: 16px;
				}
				/deep/.el-form {
					height: 100%;
					.el-form-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
						margin: 0 0 1.041vw;
						.el-form-item__content {
							display: flex;
							width: 100%;
							align-items: center;
							.el-input__inner {
								height: 40px;
								font-size: 16px;
							}
						}
						input.userPhone {
							width: 15.625vw;
							border-left: none;
							border-radius: 0 5px 5px 0;
							vertical-align: middle;
						}
						span.phoneType {
							display: inline-block;
							width: 65px;
							height: 38px;
							line-height: 38px;
							text-align: center;
							color: #333;
							border: 1px solid #dededf;
							border-radius: 5px 0 0 5px;
							vertical-align: middle;
							font-size: 16px;
						}
						input:focus {
							outline: none;
						}
						input:-webkit-autofill {
							-webkit-text-fill-color: #dadbff !important;
							-webkit-text-fill-color: #ffffff;
							transition: background-color 5000s ease-in-out 0s;
						}
						.remember {
							display: flex;
							justify-content: space-between;
							color: #ffffff;
						}
						a {
							text-decoration: none;
							color: #dadbff;
						}
						.registbtn {
							display: block;
							width: 19.625vw;
							height: 2.083vw;
							border-radius: 5px;
							line-height: 2.083vw;
							letter-spacing: 0.2vw;
							text-align: center;
							background: #1890ff;
							background-size: 15.625vw 2.083vw;
							color: #ffffff;
							font-size: 16px;
						}
					}
				}
			}
		}
	}
</style>
